<template>
  <div class="home">
    <h1>教育工具集</h1>
    <div class="tools-grid">
      <div v-for="tool in tools" :key="tool.id" 
           class="tool-card" @click="goToDetail(tool.id)">
        <div class="tool-icon">{{ tool.icon }}</div>
        <h3>{{ tool.name }}</h3>
        <p>{{ tool.description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { tools } from '@/data/tools'

export default {
  name: 'HomeView',
  data() {
    return {
      tools
    }
  },
  methods: {
    goToDetail(id) {
      this.$router.push(`/tool/${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  padding: 2rem;
  
  h1 {
    text-align: center;
    margin-bottom: 2rem;
  }
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.tool-card {
  background: white;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.2s;

  &:hover {
    transform: translateY(-5px);
  }

  .tool-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }

  h3 {
    margin-bottom: 0.5rem;
  }
}
</style> 